<!-- 巡检计划点位排序 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">点位</div>
			</div>
		</template>

		<template #default>
			<div class="zs-layout-flex-col zs-drawer-container">
				<div class="zs-card zs-table-page-content zs-layout-flex-auto">
					<el-table ref="tableRef" class="zs-table-page-main form_table" :data="tableData.data" row-key="id" v-loading="tableData.loading" stripe>
						<el-table-column label="" width="80">
							<el-icon class="zs-pointer move-icon">
								<Switch />
							</el-icon>
						</el-table-column>
						<el-table-column type="index" label="序号" width="60" align="center" />
						<el-table-column prop="pointName" label="点位名称" align="left" show-overflow-tooltip />
						<el-table-column prop="pointNum" label="点位编号" align="left" show-overflow-tooltip />
						<el-table-column prop="pointFloorNum" label="楼层" align="left" />
						<el-table-column prop="pointLocation" label="点位位置" align="left" show-overflow-tooltip />
					</el-table>
				</div>
			</div>
		</template>

		<template #footer>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { planPointSortListApi, planPointSortApi } from '@/api/inspect.js';
	import Sortable from 'sortablejs';
	import { ref, reactive, nextTick, watch } from 'vue';
	import { ElMessage } from 'element-plus';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
	});

	let route = useRoute();
	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSizeBig);
	const tableRef = ref();
	//抽屉flag
	let isShowDrawer = ref(props.isShow);
	// 列表 filed
	let tableData = reactive({
		loading: false,
		data: [],
	});

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			nextTick(() => {
				newVal && queryList();
				initSortable();
			});
		},
	);

	const emit = defineEmits(['close']);

	// 列表数据源 | 返显
	const queryList = async () => {
		tableData.loading = true;
		let res = await planPointSortListApi(props.currentRow.id);
		if (res.data.code !== 200) return;
		tableData.loading = false;
		tableData.data = res.data.data || [];
	};

	//提交
	const doConfirm = async () => {
		console.log(tableData.data)
		let ids = tableData.data.map(item => item.id)
		let res = await planPointSortApi({ids:ids});
		if (res.data.code !== 200) return;
		ElMessage({
			message: '提交成功',
			type: 'success',
		});
		isShowDrawer.value = false;
		emit('close', { isShow: false, isRefresh: true });
	};

	//初始化拖拽
	const initSortable = () => {
		Sortable.create(document.querySelector('.form_table .el-table__body-wrapper tbody'), {
			handle: '.move-icon',
			onEnd: event => {
				const { newIndex, oldIndex } = event;
				const currRow = tableData.data.splice(oldIndex, 1)[0];
				tableData.data.splice(newIndex, 0, currRow);
				let arr = Array.from(tableData.data);
				tableData.data = arr.map((item, index) => {
					item.order = index
					return item
				});
			},
			onStart: start => {},
		});
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};
</script>
